<template>
	<view class="">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
		
			:up="upOption">
			<view class="get-coupon">
				<view>
					<image class="banner" src="/static/images/banner_coupon.jpg"></image>
				</view>
				<view class=" bg-white " style="padding: 20upx 24upx;" >
					<view class="flex">
						<view class="flex-1 m-r-20" style="padding: 10upx 20upx;background-color: #f1f1f1;">
							<input type="number" placeholder="请输入兑换码" v-model="code" style="font-size: 28upx;border-radius: 10upx;" >
						</view>
						<view 
						class="code-btn bg-primary white text-center br10"  
						style="padding: 10upx 20upx;width: 120upx;"
						@click="getCouponCodeFun"
						>
							领取
						</view>
					</view>
					
				</view>
				<view class="bg-body main ">
					<coupon-list :list="couponList" :btn-type="3" @refresh="refresh"></coupon-list>
				</view>
			</view>
			
		</mescroll-body>
		
	</view>
	
	
</template>

<script>
	import {
		getCouponList,
		getCoupon
	} from '@/api/activity';
	import {getCouponCode} from '@/api/user'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				code:'',
				active: 0,
				upOption: {
					empty: {
						icon: '/static/images/coupon_null.png',
						tip: "暂无优惠券",
					}
				},
				tabList: [{
					name: '全部',
					type: 'all'
				},{
					name: '店铺券',
					type: 'shop'
				},{
					name: '通用券',
					type: 'platform'
				}],
				couponList: []
			};
		},

		onLoad(options) {
			
		},

		methods: {
			getCouponCodeFun(){
				let {code} = this;
				if(code==''){
					this.$toast({
						title:'请输入兑换码'
					})
					return
				}
				
				getCouponCode({code}).then(res=>{
					if(res.code==1){
						this.$toast({
							title:'领取成功'
						})
					}
				})
			},
			upCallback(page) {
				const {tabList, active} = this
				getCouponList({
					page_size:page.size,
					page_no:page.num,
					type: tabList[active].type
				}).then(({
					data
				}) => {
					if (page.num == 1) this.couponList = [];
					const curPageData = data.lists;
					const curPageLen = curPageData.length;
					const hasNext = !!data.more;
					this.couponList = this.couponList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			changeActive(index) {
				this.active = index
				this.refresh()
			},
			refresh() {
				this.couponList = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			}
		}
	};
</script>
<style>
	.banner {
		width: 100%;
		height: 340rpx;
	}
	.main {
		border-radius: 20rpx 20rpx 0 0;
		/* margin-top: -20rpx; */
		overflow: hidden;
		position: relative;
	}
	.code-btn{
		
		/* background-color: ; */
	}
</style>
